<!doctype html>
<html class="no-js" lang="en"
      xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>鱼水狩·Blog</title>
    <meta name="description" content="博客">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="/assets/img/favicon.ico">
    <!-- CSS here -->
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/assets/css/slicknav.css">
    <link rel="stylesheet" href="/assets/css/flaticon.css">
    <link rel="stylesheet" href="/assets/css/animate.min.css">
    <link rel="stylesheet" href="/assets/css/magnific-popup.css">
    <link rel="stylesheet" href="/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="/assets/css/themify-icons.css">
    <link rel="stylesheet" href="/assets/css/slick.css">
    <link rel="stylesheet" href="/assets/css/nice-select.css">
    <link rel="stylesheet" href="/assets/css/style.css">

    <!--头像插件-->
    <script src="/avatar/jquery.min.js"></script>
    <link href="/avatar/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/avatar/bootstrap/js/bootstrap.min.js"></script>
    <link href="/avatar/cropper/cropper.min.css" rel="stylesheet">
    <link href="/avatar/sitelogo/sitelogo.css" rel="stylesheet">
    <script src="/avatar/cropper/cropper.min.js"></script>
    <script src="/avatar/sitelogo/sitelogo.js"></script>
    <link rel="stylesheet" href="/tao/mine.css">
    <script src="/tao/config.js"></script>
</head>
<body  background="/assets/img/gallery/section_bg04.jpg">
<!--              前置渲染js              -->
<script th:inline="javascript">
    let tokenSign = [[${token}]];
    if (tokenSign != null && tokenSign.length > 20)
        window.sessionStorage.setItem('token', JSON.stringify(tokenSign));

    let strings = tokenSign.split("."); //截取token，获取载体
    let tokenInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
    var username = tokenInfo.userInfo.username;
    var avatarUrl = tokenInfo.userInfo.avatarUrl;
    var userCode = tokenInfo.userInfo.userCode;
    var email = tokenInfo.userInfo.email;
    var level = tokenInfo.userInfo.level;
</script>
<!-- Preloader Start -->
<div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="preloader-circle"></div>
            <div class="preloader-img pere-text">
                <img src="/assets/img/logo/logo.png" alt="QAQ">
            </div>
        </div>
    </div>
</div>
<!-- Preloader Start -->
<header>
    <!-- Header Start -->
    <div class="header-area">
        <div class="main-header  header-sticky">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <!-- Logo -->
                    <div class="col-xl-2 col-lg-2 col-md-1">
                        <div class="logo row">
                            <a href="/index"><img src="/assets/img/logo/logo.png" alt="QAQ"></a>
                        </div>
                    </div>
                    <div class="col-xl-10 col-lg-10 col-md-10">
                        <div class="menu-main d-flex align-items-center justify-content-end">
                            <!-- Main-menu -->
                            <div class="main-menu f-right d-none d-lg-block">
                                <nav>
                                    <ul id="navigation">
                                        <li><a href="/index" id="url03">首页</a></li>
                                        <li><a href="/resource">资源</a></li>
                                        <li><a href="/followed/token">关注</a></li>
                                        <li><a href="/news/token">消息</a></li>
                                        <li><a href="/my/token" id="url01">我的</a></li>
                                        <li><a href="/editor/token" id="url02">发布帖子</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <div id="isAuth" style="display: inline">
                                <div class="header-right-btn f-right d-none d-xl-block ml-20" >
                                    <a href="/login" class="btn header-btn">登录</a>
                                    <a href="/register" class="btn header-btn">注册</a>
                                </div>
                            </div>
                            <!--              导航栏渲染js              -->
                            <script> navStarter() </script>
                        </div>
                    </div>
                    <span style="font-size: xx-small;color: darkgrey" th:text="'访问量:'+${visitorNum}"></span>
                    <!-- Mobile Menu -->
                    <div class="col-12">
                        <div class="mobile_menu d-block d-lg-none"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->
</header>
<main>
    <!-- Start Align Area -->
    <div class="whole-wrap">
        <div class="container box_1170">
            <div class="section-top-border">
                <h3 class="mb-30">个人信息</h3>
                <div class="ibox-content">
                    <div class="row">
                        <div id="crop-avatar" class="col-md-6">
                            <div class="avatar-view" title="更换头像" id="changeAvatar">
                                <script>
                                    let img = document.createElement("img");
                                    img.src = FILE_SERVER_URL + this.avatarUrl;
                                    img.alt="Logo"
                                    document.getElementById("changeAvatar").appendChild(img)
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <form class="avatar-form" action="/uploadAvatar" enctype="multipart/form-data" method="post">
                                <div class="modal-header">
                                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <div class="avatar-body">
                                        <div class="avatar-upload">
                                            <input name="userToken" type="hidden" id="uploadToken">
                                            <script>
                                                let temToken = window.sessionStorage.getItem('token')
                                                document.getElementById("uploadToken").value = temToken.substring(1,temToken.length - 1)
                                            </script>
                                            <input class="avatar-src" name="avatarSrc" type="hidden">
                                            <input class="avatar-data" name="avatarData" type="hidden">
                                            <label for="avatarInput">头像上传</label>
                                            <input class="avatar-input" id="avatarInput" name="avatarFile" type="file">
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="avatar-wrapper"></div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="avatar-preview preview-lg"></div>
                                                <div class="avatar-preview preview-md"></div>
                                                <div class="avatar-preview preview-sm"></div>
                                            </div>
                                        </div>
                                        <div class="row avatar-btns">
                                            <div class="col-md-9">
                                                <div class="btn-group">
                                                    <button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
                                                </div>
                                                <div class="btn-group">
                                                    <button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <button class="btn btn-success btn-block avatar-save" type="submit"><i class="fa fa-save"></i> 上传头像</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
                <div class="row">
                    <div class="col-lg-12">
                        <blockquote class="generic-blockquote">
                            鱼水id:  <span><script>document.write(this.userCode);</script></span>
                        </blockquote>
                        <blockquote class="generic-blockquote">
                            用户名:  <span><script>document.write(this.username);</script></span>
                        </blockquote>
                        <blockquote class="generic-blockquote">
                            邮箱:  <span><script>document.write(this.email);</script></span>
                        </blockquote>
                        <blockquote class="generic-blockquote">
                            等级:  <span><script>document.write(this.level);</script></span>
                        </blockquote>
                    </div>
                </div>
            </div>
    </div>
    </div>
    <!-- End Align Area -->
</main>
<footer>
    <!-- Footer Start-->
    <div class="footer-area">
        <div class="container">
            <div class="footer-top footer-padding">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="footer-top-cap text-center">
                            <img src="/assets/img/logo/logo.png" alt="QAQ">
                            <span><a href="#">245149633@qq.com</a></span>
                            <p>以上是作者邮箱,有意见可联系作者</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="row d-flex justify-content-between align-items-center">
                    <div class="col-xl-9 col-lg-8">
                        <div class="footer-copy-right">
                            <p>
                                Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This webSite is made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="http://wytcloud.top" target="_blank">鱼水狩</a>
                                <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2021062754号</a>
                            </p>
                            <p>
                                Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | Thanks for view template provider,<a href="https://colorlib.com" target="_blank">Colorlib</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer End-->
</footer>
<!-- Scroll Up -->
<div id="back-top" >
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<!-- JS here -->
<!-- All JS Custom Plugins Link Here here -->
<script src="/assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="/assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="/assets/js/jquery.slicknav.min.js"></script>

<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="/assets/js/owl.carousel.min.js"></script>
<script src="/assets/js/slick.min.js"></script>
<!-- One Page, Animated-HeadLin -->
<script src="/assets/js/wow.min.js"></script>
<script src="/assets/js/animated.headline.js"></script>
<script src="/assets/js/jquery.magnific-popup.js"></script>

<!-- Nice-select, sticky -->
<script src="/assets/js/jquery.nice-select.min.js"></script>
<script src="/assets/js/jquery.sticky.js"></script>

<!-- contact js -->
<script src="/assets/js/contact.js"></script>
<script src="/assets/js/jquery.form.js"></script>
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/mail-script.js"></script>
<script src="/assets/js/jquery.ajaxchimp.min.js"></script>

<!-- Jquery Plugins, main Jquery -->
<script src="/assets/js/plugins.js"></script>
<script src="/assets/js/main.js"></script>

</body>
</html>